<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .logo{
            width: 150px;
            height: 80px;
            margin: auto;
        }
        .logo img{
            width: 150px;
            height: 80px;
            margin: auto;
            
        }
       .left{
        width: 700px;
            height: 400px;
           float: left;
           margin-top: -70px;
           margin-left: 40px;
       }
       .right{
           width: 500px;
           margin-left: 750px;
       }
        h2{
            width: 220px;
            margin-top: 100px;
            margin-left: 100px;
            font-size: 22px;
        }
        
        #con img{
            width: 700px;
            height: 400px;
            
            
        }
        .add-cart{
            border: none;
            border: solid 1px;
            width: 150px;
            height: 50px;
            background: rgb(219, 233, 233);
            margin-left: 100px;
            border-radius: 14px;
        }
        .desc{
            width: 200px;
            margin-top: 30px;
            margin-left: 100px;
        }
        .price{
            width: 200px;
            margin-top: 30px;
            margin-left: 100px;
        }
        a{
            font-size: 14px;
            color: black;
            display: inline-block;
            text-decoration: none;
            border: solid 1px;
            width: 150px;
            height: 50px;
            background: rgb(219, 233, 233);
            margin-left: 110px;
            border-radius: 14px;
            text-align: center;
            line-height: 50px;
            margin-top: 30px;
        }
    </style>
</head>

<body>
    <div class="logo">
        <img src="../img/logo.png" alt="">
    </div>
    <div id="con">
        <!-- <h2></h2>
                
                <button type="button">加入购物车</button>
                <img src="" >
                <p></p>
                <p></p> -->
    </div>
    <a href="购物车.html">查看我的购物车</a>


    <script src="../js/jquery-1.11.3.min.js"></script>
    <script>
        // 获取URL中的搜索参数
        console.log(location.search)
        let searchParams = new URLSearchParams(location.search.slice(1));
        let pid = searchParams.get('pid')
        let uid = localStorage.getItem('id')
        console.log(pid)

        let goodsDetailAPI = 'http://jx.xuzhixiang.top/ap/api/detail.php';
        $.ajax({
            url: goodsDetailAPI,
            type: 'get',
            data:{
                id:pid
            }
        }).then(res => {
            console.log(res)
            let html = ''
             html = `
                    <div class="left">
                        <img src="${res.data.pimg}" >
                    </div>

                    <div class="right">
					    <h2>${res.data.pname}</h2>
					    <p class="desc">${res.data.pdesc}</p>
					
                        <p class="price">${res.data.pprice}</p>
                        <button type="button" class="add-cart">加入购物车</button>
                    </div>

					
				
				`
            $('#con').html(html);


            $('.add-cart').click(function(){
                let pnum = 1
                let CartAddAPI = `http://jx.xuzhixiang.top/ap/api/add-product.php`
                $.ajax({
                    url:CartAddAPI,
                    type:'get',
                    data:{
                       uid:uid,
                        pid:pid,
                        pnum:pnum 
                    }
                    
                    

                }).then(res=>{
                    console.log(res)
                    alert('加入成功')
                })
            })


        }).fail(err => {
            console.log(err)
        })





    </script>

</body>

</html>